<template>
    <el-container class="elcon1">
        <el-aside class="elcon3" width="300px" border style="background-color: #fff">
            <el-tree :props="props" :load="loadNode"
                     lazy highlight-current @node-click="handleNodeClick"
                     ref="tree">
            </el-tree>
        </el-aside>
        <el-container class="elcon2">
            <el-header>
                <div class="input-suffix">
                    <el-button type="warning" size="medium" class="handle-del mr10" :plain="true" @click="add">新增
                    </el-button>
                    <el-button type="primary" size="medium" class="handle-del mr10" :plain="true" @click="query">查询
                    </el-button>
                </div>
            </el-header>
            <el-main>
                <el-row class="input-suffix">
                    <el-col :span="12">
                        菜单编码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-input clearable size="medium" v-model="qmenuCode" placeholder="请输入菜单编码"
                                  prefix-icon="el-icon-search" class="handle-input mr10"></el-input>
                    </el-col>
                    <el-col :span="12">
                        菜单名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-input clearable size="medium" v-model="qmenuName" placeholder="请输入菜单名称"
                                  prefix-icon="el-icon-search" class="handle-input mr10"></el-input>
                    </el-col>
                </el-row>
                <el-table :data="tableData" border class="table" ref="multipleTable"
                          v-loading="loading"
                          element-loading-text="拼命加载中"
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table-column prop="menuCode" label="菜单编码">
                    </el-table-column>
                    <el-table-column prop="menuName" label="菜单名称">
                    </el-table-column>
                    <el-table-column prop="menuType" label="菜单类型">
                    </el-table-column>
                    <el-table-column prop="path" label="系统调用路径">
                    </el-table-column>
                    <el-table-column prop="routerPath" label="页面地址">
                    </el-table-column>
                    <el-table-column label="操作" width="auto" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" class="blue"
                                       @click="handleEdit(scope.$index, scope.row)">修改
                            </el-button>
                            <el-button type="text" size="mini" class="red"
                                       @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background
                                   layout="total,prev, pager, next"
                                   :page-size="pageSize"
                                   :total="totallRows"
                                   :current-page="currentPageNo"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
        <!-- 新增弹出框 -->
        <el-dialog title="菜单信息" :visible.sync="editVisible" width="50%">
            <el-form ref="form" :model="menuEntity" label-width="100px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="*菜单编码" class="redItem">
                            <el-input clearable :disabled="disabled" v-model="menuEntity.menuCode"
                                      type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="*菜单名称" class="redItem">
                            <el-input :disabled="disabled" clearable v-model="menuEntity.menuName"
                                      type="text"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="菜单类型">
                            <el-select v-model="menuEntity.menuType" placeholder="请选择">
                                <el-option key="0" label="WEB端" value="WEB端"></el-option>
                                <el-option key="1" label="APP端" value="APP端"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="系统调用路径">
                            <el-input clearable v-model="menuEntity.path" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="页面地址">
                            <el-input clearable v-model="menuEntity.routerPath" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="上级菜单">
                            <el-input clearable v-model="menuEntity.parentName" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="是否末级">
                            <el-switch
                                    v-model="menuEntity.isleaf"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="getChangeSwitchValueEvent">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="图标">
                            <el-input clearable v-model="menuEntity.icon" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="10">
                        <el-form-item label="序号">
                           <el-input-number  v-model="menuEntity.orderNo" :min="-999" :max="999" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" :plain="true">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>


</template>

<script>
    import {
        selectSmMenuTree_Url, changeMenuMsg_Url,
        queryByCodeOrName_Url, queryMenuByCodeOrName_Url,
        queryMenuTableByCodeOrName_Url, delMenuMsg_Url,queryMenuByParentId
    } from "@/config/api";

    export default {
        name: 'menuQuery',
        data() {
            return {
                qmenuCode: "",
                qmenuName: "",
                menuId: "",
                menuName: "",
                disabled: false,
                status: '',
                menuStatus: '',
                tableData: [],
                node: [],
                resolve: [],
                editVisible: false,
                delVisible: false,
                loading: false,
                totallRows: 0,    /* 总数据行数 */
                pageSize: 10,    /* 当前页数据显示条数 */
                currentPageNo: 1,   /* 当前页码 */
                props: {/* 配置选项 */
                    label: 'label', /* 指定节点标签为节点对象的某个属性 */
                    children: 'children',/* 指定子树为节点对象的某个属性 */
                    isLeaf: 'isLeaf' /* 指定节点否为叶子节点 */
                },
                treedata: [],
                menuEntity: {
                    menuId: '',
                    menuCode: '',
                    menuName: '',
                    menuType: '',
                    path: '',
                    routerPath: '',
                    parentId: '',
                    parentName: '',
                    leaf: '',
                    isleaf: '',
                    icon: '',
                    orderNo:10
                },
            }
        },
        methods: {
            /* 加载子数据，仅当lazy属性为true时生效
            * resolve的数据是后台给出*/
            loadNode(node, resolve) {
                if (node.level === 0) {
                    this.node = node;
                    this.resolve = resolve;
                    return resolve([{
                        menuId: "",
                        label: '菜单信息'
                    }]);
                } else {
                    this.menuId = node.data.menuId;
                    this.menuName = node.data.label;
                    selectSmMenuTree_Url({
                        PARENT_ID: node.data.menuId
                    }).then(res => {
                        // console.log("子节点加载数据======>>>"+JSON.stringify(res.data));
                        this.treedata = res.data.data
                        resolve(this.treedata);
                    })
                }
            },
            /*树节点的内容区的渲染*/
            renderContent(h, {node, data, store}) {
                // alert(node.level);
                // if(node.level!=1){
                //     return (
                //         <span class="custom-tree-node">
                //         <span>{node.label}</span>
                //     <span>
                //     <el-button
                //     on-click={()=> this.append(data,node) }>
                //     添加</el-button>
                //     <el-button
                //     on-click={()=> this.remove(node, data) }>
                //     删除</el-button>
                //     </span>
                //     </span>
                // );
                // }else {
                //
                // }
            },
            /*分页加载*/
            handleCurrentChange(val) {
                this.currentPageNo = val;
                if(this.menuId === "")
                {
                     queryMenuByParentId({
                        parentId: "",
                        pageNo: this.currentPageNo
                    }).then(res => {
                        this.tableData = res.data.records;
                        this.totallRows = res.data.rowCount;
                        this.currentPageNo = res.data.pageNow;
                        this.loading = false;
                    })
                }else
                {
                    this.loadTableData()
                }
                
            },
            /* 子节点点击加载事件 */
            handleNodeClick(node) {
                if (node.menuId === '' || node.menuId == null) {
                    this.loading = true;
                    queryMenuByParentId({
                        parentId: "",
                        pageNo: this.currentPageNo
                    }).then(res => {
                        this.tableData = res.data.records;
                        this.totallRows = res.data.rowCount;
                        this.currentPageNo = res.data.pageNow;
                        this.loading = false;
                    })
                    this.menuId = "";
                    // this.menuName = node.label;
                    // this.loadTableData();
                } else {
                    this.menuId = node.menuId;
                    this.menuName = node.label;
                    this.loadTableData();
                }
            },
            /*子节点添加事件（Tree内部自带）
            * *data：是指追加的子节点数据
            * node：是指选中的节点*/
            append(data, node) {

            },
            /*点击子节点下展示表格数据事件*/
            loadTableData() {
                this.loading = true;
                queryMenuTableByCodeOrName_Url({
                    PARENT_ID: this.menuId,
                    MENU_CODE: this.qmenuCode,
                    MENU_NAME: this.qmenuName,
                    pageNo: this.currentPageNo
                }).then(res => {
                    //    console.log("子节点点击后表格加载的数据======>>>"+JSON.stringify(res.data));
                    this.tableData = res.data.records;
                    this.totallRows = res.data.rowCount;
                    this.currentPageNo = res.data.pageNow;
                    this.loading = false;
                })
            },
            /* 查询事件 */
            query() {
                this.loadTableData();
            },
            /* 新增弹框 */
            add() {
                // if (this.menuId == '' || this.menuId == null) {
                //     this.$message(' 新增之前请选定左侧父级节点！！！');
                //     return false
                // } else {
                this.status = 0;
                this.disabled = false;
                this.editVisible = true;
                this.menuEntity = {
                    menuId: '',
                    menuCode: '',
                    menuName: '',
                    menuType: '',
                    path: '',
                    routerPath: '',
                    parentId: this.menuId,
                    parentName: this.menuName,
                    leaf: false,
                    isleaf: '',
                    icon: '',
                    orderNo:10
                }
                // }
            },
            /* 确定提交事件 */
            submit() {
                if (this.status == 0) {/*新增*/
                    var i = 0;
                    if (this.menuEntity.leaf) {
                        i = 1;
                    }
                    const menudata = {
                        menuId: '',
                        menuCode: this.menuEntity.menuCode,
                        menuName: this.menuEntity.menuName,
                        menuType: this.menuEntity.menuType,
                        path: this.menuEntity.path,
                        routerPath: this.menuEntity.routerPath,
                        parentId: this.menuEntity.parentId,
                        isleaf: i,
                        icon: this.menuEntity.icon,
                        orderNo:this.menuEntity.orderNo
                    }
                    if (this.menuEntity.menuCode == '' || this.menuEntity.menuCode == null
                        || this.menuEntity.menuName == '' || this.menuEntity.menuName == null) {
                        this.$message.error('新增失败：*为必填项');
                        return false;
                    }
                    changeMenuMsg_Url(
                        menudata
                    ).then(res => {
                        // console.log("测试添加菜单架构数据后返回的状态值======>>>"+JSON.stringify(res.data))
                        if (res.data.data == true) {
                            this.$message.success(' 恭喜你，数据添加成功！！！');
                            // /*创建子级树*/
                            // this.node.childNodes = [];
                            // /*加载树形结构*/
                            // this.loadNode(this.node, this.resolve);
                            // this.tableData = [];
                            // this.totallRows = 0;
                            // this.editVisible = false;
                        } else {
                            this.$message.error(res.data.msg);
                            this.editVisible = false;
                            return false;
                        }
                    })
                } else {/* 修改操作事件 */
                    if (this.menuEntity.isleaf) {
                        this.menuEntity.isleaf = 1
                    } else {
                        this.menuEntity.isleaf = 0
                    }
                    changeMenuMsg_Url(
                        this.menuEntity
                    ).then(res => {
                        // console.log("测试菜单修改数据后返回的状态值======>>>"+JSON.stringify(res.data))
                        if (res.data.data == true) {
                            this.$message.success(' 恭喜你，数据修改成功！！！');
                            // this.node.childNodes = [];
                            // this.loadNode(this.node, this.resolve);
                            // //this.loadTableData();
                            // this.tableData = [];
                            // this.totallRows = 0;
                            // this.editVisible = false;
                        } else {
                            this.$message.error(res.data.msg);
                            this.loadTableData();
                            this.editVisible = false;
                            return false;
                        }
                    })
                }
            },
            /* 修改弹窗 */
            handleEdit(index, row) {
                this.status = 1;
                this.idx = index;
                this.disabled = true;
                this.menuEntity = this.tableData[index];
                if (this.menuEntity.isleaf === 0) {
                    this.menuEntity.isleaf = false
                } else {
                    this.menuEntity.isleaf = true
                }
                this.menuEntity.parentName = this.menuName;
                this.editVisible = true;
            },
            /* 删除弹框 */
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            /* 确定删除事件 */
            deleteRow() {
                delMenuMsg_Url({
                    MENU_ID: this.tableData[this.idx].menuId
                }).then(res => {
                    if (res.data.success) {
                        this.$message.success('删除成功');
                        this.node.childNodes = [];
                        this.loadNode(this.node, this.resolve);
                        //this.loadTableData();/*加载其找寻不到父级Id*/
                        this.tableData = [];
                        this.totallRows = 0;
                        this.delVisible = false;
                    } else {
                        this.$message.error()(`删除失败`);
                    }
                })
            },
            /*Switch改变事件*/
            getChangeSwitchValueEvent() {
                console.log(this.menuEntity.isleaf)
            },
            /*修改取消事件（此处保证弹框输入框的值不会传入表格之中）*/
            cancel() {
                if (this.status === 1) {
                    this.loadTableData();
                    this.editVisible = false
                } else {
                    this.editVisible = false
                }
            }
        }
    }
</script>


<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .elcon1 {
        height: 100%;
    }

    .elcon2 {
        height: 100%;
        background-color: #fff;
        border: 1px solid #ddd;
        margin-left: 15px;
        border-radius: 5px;
        font-size: 14px;
    }

    .elcon3 {
        height: 100%;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    }

    .table1 {
        margin-left: 10px;
        width: 80%;
        font-size: 14px;
    }

    .table {
        width: 100%;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .input-suffix {
        margin: 10px;
    }

    .label {
        margin-right: 50px;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 10px;
        padding-right: 8px;
        margin: 20px;
    }
</style>
